<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css"/>
    <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
    <title>Document</title>
</head>
<body>
<div id="map"></div>
<div id="selectedFeatures"></div>
<script>
    var beijing = ol.proj.fromLonLat([116.28, 39.54]);
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: beijing,
            zoom: 4
        })
    });

    //实例化矢量点要素，通过矢量图层添加到地图容器中
    //这样就实现了预先加载图文标注
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(beijing),
        name: '北京市',                         //名称属性
        population: 2115                       //人口数（万）
    });
    //设置点要素样式
    iconFeature.setStyle(createLabelStyle(iconFeature));
    //矢量标注的数据源
    var vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });
    //矢量标注图层
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);

    //矢量标注样式设置函数，设置image为图标ol.style.Icon
    function createLabelStyle(feature) {
        //   console.log(feature);
        return new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 60],              //锚点
                anchorOrigin: 'top-right',       //锚点源
                anchorXUnits: 'fraction',       //锚点X值单位
                anchorYUnits: 'pixels',         //锚点Y值单位
                offsetOrigin: 'top-right',      //偏移原点
                opacity: 0.75,
                scale: 0.05,
                src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594359193211&di=1d6bb819a5daa724ff65cc4d011d4d42&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F10%2F27%2F05dc60e54e3aa5d093cdc32611303643.jpg'  //图标的URL
            }),
            text: new ol.style.Text({
                textAlign: 'center',            //位置
                textBaseline: 'bottom',         //基准线
                font: 'normal 12px 微软雅黑',    //文字样式
                text: feature.get('name'),      //文本内容
                fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
                    color: '#000'
                }),
                stroke: new ol.style.Stroke({
                    color: '#F00',
                    width: 2
                })
            })
        });
    }

    var coordinate1 = [10806361.310845079, 3942927.667062532];        //鼠标单击点的坐标
    var coordinate2 = [11540156.782382771, 4539747.983913189]      //鼠标单击点的坐标
    var coordinate3 = [12225032.55581795, 3982063.4255445423]      //鼠标单击点的坐标
    var arr = [coordinate1, coordinate2, coordinate3]
    //新建一个要素ol.Feature
    arr.forEach((ar, index) => {
        var newFeature = new ol.Feature({
            geometry: new ol.geom.Point(ar),  //几何信息
            name: '标注点' + index
        });
        newFeature.setStyle(createLabelStyle(newFeature));      //设置要素样式
        vectorSource.addFeature(newFeature);
    });

    var draw = new ol.interaction.Draw({
        source: vectorLayer.getSource(),
        type: "Circle",
        style: new ol.style.Style({
            // 将点设置成圆形样式
            image: new ol.style.Circle({
                // 点的颜色
                fill: new ol.style.Fill({
                    color: '#F00'
                }),
                // 圆形半径
                radius: 5
            }),
            // 线样式
            stroke: new ol.style.Stroke({
                color: '#0F0',
                lineCap: 'round',       // 设置线的两端为圆头
                width: 5
            })
        }),
        geometryFunction: ol.interaction.Draw.createBox() // 使画出来的现状为矩形

    });
    map.addInteraction(draw);
    draw.on('drawend', function (evt) {
        var polygon = evt.feature.getGeometry();
        setTimeout(function () {              //如果不设置延迟，范围内要素选中后自动取消选中，具体原因不知道
            var extent = polygon.getExtent()
            var features = vectorLayer.getSource().getFeaturesInExtent(extent); //先缩小feature的范围
            var str = "";
            for (var i = 0; i < features.length; i++) {
                var newCoords = features[i].getGeometry().getCoordinates();
                if (features[i].get("name")) {
                    str += "<div class=\"selectedItem\" οnclick='showDeviceOnMap(\"" + features[i].getId() + "\");'>" + features[i].get("name") + "</div>";
                }
            }
            document.getElementById('selectedFeatures').innerHTML = str
        }, 300)
    })
</script>
</body>
</html>